<template>
    <s-box title="动态信息来源分布" :span="6">
        <div class="chart-wrap" ref="chart"></div>
    </s-box>
</template>
<script>
import delegate from '../js/event.js';
import echarts from "echarts";
import data2 from "./guanxi.json";
import mixin from '../js/mixin.js';
export default {
    mixins:[mixin],
    data() {
        return {
            xData:[],
            yData:[],
           data2
        }
    },
    mounted(){
        this._initMethod();
    },
    beforeDestroy(){
        delegate.$off('draw-open',this._initChart)
        delegate.$off('s-search',this._initSearch)
    },
    methods: {
        _initMethod() {
            delegate.$on('s-search',this._initSearch)
            delegate.$on('draw-open',this._initChart)
        },
        _initSearch(obj){

        },
        _initChart(bool) {
            if(!bool) return;
            this._getSourceDatalist();
        },
        _getSourceDatalist(){
            if(!this.navCurrentId) return;
            this.api({
                    url: "newtechanalyse/technologySourceDistribution",
                    method: "post",
                    data:`topicId=${this.navCurrentId}`
            }).then(data => {
                console.log(data,'11111');
                this.xData = [];
                this.yData = [];
                let maxNum = 0;
                this.maxNumList = [];
                data.forEach((item,index) =>{
                    this.xData.push(item.sourcename);
                    this.yData.push(item.num);
                    if(item.num >= maxNum){
                        maxNum = item.num;
                    }
                })
                data.forEach(()=>{
                    this.maxNumList.push(maxNum)
                })

                this.chart();
            })
        },
        chart(){
            this.$nextTick(() => {
                let myChart = echarts.init(this.$refs.chart);
                //let xData = ['网络','社交平台','期刊','专利','论文'];
                let xData = this.xData;
                myChart.setOption({
                // legend:{}
                //     left:0,
                //     data:[
                //         {
                //             name:'云计算',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         },
                //         {
                //             name:'人脸识别',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         },
                //         {
                //             name:'图像识别',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         },
                //          {
                //             name:'音频识别',
                //             icon: 'rect',
                //             textStyle: {
                //                 color: '#98caec'
                //             }
                //         }

                //     ],
                // },
                color:['#dd8f04','#6459f0', '#00a3fa'],
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                    // 坐标轴指示器，坐标轴触发有效
                    type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: "0",
                    right: "2%",
                    top: "13%",
                    bottom: "15%",
                    containLabel: true
                },
                xAxis: {
                    type: "category",
                    data: xData,
                    interval: 10,
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    splitLine: {
                        show:false,
                        lineStyle: {
                            type: "dashed",
                            color: "#98caec" //分割线颜色
                        }
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: "#98caec", //坐标轴线颜色
                            width: 1
                        }
                    },
                    axisLabel: {
                        color: "#98caec" //坐标轴名称颜色
                    }
                },
                yAxis: {
                    type: "value",
                    axisTick: {
                        show: false,
                        alignWithLabel: true
                    },
                    splitLine: {
                        show:false,
                        lineStyle: {
                            type: "dashed",
                            color: "#054e76" //分割线颜色
                        }
                    },
                    axisLine: {
                        show:false,
                        lineStyle: {
                            color: "#98caec", //坐标轴线颜色
                            width: 2,
                            
                        }
                    },
                    axisLabel: {
                         show:false,
                         color: "#a1d6f8" //坐标轴名称颜色
                    }
                },
                series: [
                    {
                        name:'最大值',  
                        data: this.maxNumList,
                        type: "bar",
                        barGap:'-100%',
                        barMaxWidth:'26',
                        itemStyle: {
                            normal: {
				                color:'#061e32'
				            },
                        },
                        label: {
			                normal: {
			                    show: false,
			                }
			            },
                    },
                    {  
                        name:'动态信息',
                        //data: [50,100,600,780],
                        data:this.yData,
                        type: "bar",
                        barMaxWidth:'26',
                        itemStyle: {
                            normal: {
				                color: function(params) { 
				                     return new echarts.graphic.LinearGradient(0, 0, 0, 1,
			　　　　　　　　　　　　　     [
			　　　　　　　　　　　　　　       {offset: 0, color:'#159efc' },
										   {offset: 0.7, color:'#298dfb' },
			　　　　　　　　　　　　　　       {offset: 1, color: '#6e54f4'}
			　　　　　　　　　　　　　     ]);
				                }
				            },
                        },
                        label: {
			                normal: {
			                    show: true,
			                    color:'#98caec',
                                position: 'top',
			                }
			            },
                        
                    },
                ]
                });
            });     
        }

    },
}
</script>
<style lang="scss" scoped>
  .chart-wrap{
      width: 100%;
      height: 310px;
  }
</style>
